<template>
  <div>
    <div>
       <!-- <input type="text" v-model="getByWords" placeholder="请输入项目号或项目名进行查询" style="width: 200px;position: relative;left: 750px;">
        <el-link style="position: relative;left: 750px;">查询</el-link>   <el-link style="position: relative;left: 750px;">新增</el-link> -->
        <div style="margin-top: 15px;">
          <el-col :span="6">
          <el-input placeholder="请输入项目名查询" v-model="projectName" class="input-with-select">

            <el-button slot="append" icon="el-icon-search" @click="getByName">查询</el-button>
          </el-input>
          </el-col>
          <el-button type="infor" style="position: relative;left: 880px;" @click="addProject">新增<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>

    </div>
    <el-table
        :data="getProjectByPage"
        style="width: 100%">
        <el-table-column
        prop="projectId"
        label="项目编号"
        >
        </el-table-column>
        <el-table-column
        prop="projectName"
        label="项目名"
        >
        </el-table-column>
        <el-table-column
        prop="projectDesc"
        label="项目描述"
        >
        </el-table-column>

        <el-table-column
        prop="projectState"
        label="项目状态"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-link  icon="el-icon-edit" @click="selAccountByProject(scope.row.projectId)" type="primary">成员管理</el-link>
          <el-link  icon="el-icon-edit" @click="changeProject(scope.row.projectId)" type="primary">修改</el-link>
         <!-- <el-link icon="el-icon-edit" @click="changemessage(scope.row)" type="primary"> -->


              <el-link icon="el-icon-edit" type="primary" @click="closeProject(scope.row.projectId)">
              {{scope.row.projectState=='有效'?'禁用':'启用'}}
              </el-link>



          <!-- </el-link> -->
          </template>
        </el-table-column>
        </el-table>

        <el-pagination
               fixed
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="pages.current"
               :page-sizes="[1, 2, 3, 4]"
               :page-size="pages.size"
               layout="total, sizes, prev, pager, next, jumper"
               :total="pages.total">
             </el-pagination>

             <el-dialog
               title="新增项目"
               :visible.sync="dialogVisible"
               width="30%">
               <el-form>
                 <el-input type="text" placeholder="项目名" v-model="addprojectinfo.projectName"></el-input>
                  <textarea cols="48" rows="2" placeholder="项目描述" v-model="addprojectinfo.projectDesc"></textarea>


               </el-form>
               <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                 <el-button type="primary" @click="sure">确 定</el-button>
               </span>
             </el-dialog>


             <el-dialog
               title="修改项目信息"
               :visible.sync="dialogVisible2"
               width="30%">
               <el-form>
                 <el-input type="text" placeholder="项目名" v-model="changeprojectinfo.projectName"></el-input>
                  <textarea cols="48" rows="2" placeholder="项目描述" v-model="changeprojectinfo.projectDesc"></textarea>


               </el-form>
               <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                 <el-button type="primary" @click="surechange">确 定</el-button>
               </span>
             </el-dialog>


  </div>
</template>

<script>
  export default{
    name:"project",
    data(){
      return{
        getProjectByPage:[],
        pages:{},
        projectName:"",
        dialogVisible:false,
        dialogVisible2:false,
        addprojectinfo:{
            projectName:"",
            projectDesc:""
          },
          addprojectform:{
            projectName:"",
            projectDesc:"",
            accountId:0
          },
          changeprojectinfo:{
            projectName:"",
            projectDesc:""
          },
          pid:0
      }

  },
    methods:{
      getAllProjects(current,size){
        this.$http.post("/projectInfo/getAllProjects",{"current":current,
                                                        "size":size
        }).then(resp=>{
          this.getProjectByPage=resp.data.data.records
          this.pages=resp.data.data

        })
      },
      handleSizeChange(val){

        this.pages.size=val
        this.getAllProjects(this.pages.num,val)
      },
      handleCurrentChange(val){
        this.pages.current=val
        this.getAllProjects(val,this.pages.size)
      },
      addProject(){
        this.dialogVisible=true
      },
      sure(){
        let accountId=JSON.parse(localStorage.getItem("loginUser")).accountId
         this.addprojectform.accountId=accountId
         this.addprojectform.projectName=this.addprojectinfo.projectName
         this.addprojectform.projectDesc=this.addprojectinfo.projectDesc
        this.$http.post("/projectInfo/addProject",this.addprojectform).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: resp.data.message,
                      type: 'success'
                    })


          }else{
            this.$message.error(resp.data.message)

          }
          this.dialogVisible=false
           this.getAllProjects(1,2)

        })
      },
      getByName(){
        this.$http.get("/projectInfo/getProjectByName",{
          params:{
            "projectName":this.projectName,
            "current":1,
            "size":3
          }
        }).then(resp=>{
          this.getProjectByPage=resp.data.data.records
          this.pages=resp.data.data
          // this.pages=resp.data.data
        })
      },
      selAccountByProject(pid){
        localStorage.setItem("projectId",pid)
        this.$router.push("/projectaccount")
      },
      closeProject(projectId){

        this.$http.get("/projectInfo/closeProject",{
          params:{
            "projectId":projectId
          }
        }).then(resp=>{
          if(resp.data.code==200){
            this.$message({
                      message: resp.data.message,
                      type: 'success'
                    })
          }else{
            this.$message.error(resp.data.message)
          }
          this.getAllProjects(1,2)
        })
      },
      changeProject(pid){

          this.pid=pid
          this.$http.get("projectInfo/checkProjectState",{
            params:{
              "projectId":pid
            }
          }).then(resp=>{
            if (resp.data.code==200){
              this.dialogVisible2=true
            }else{
              this.$message.error(resp.data.message)
            }
          })
          },
          surechange(pid){

                let changeprojectform={
                  "projectId":this.pid,
                  "projectName":this.changeprojectinfo.projectName,
                  "projectDesc":this.changeprojectinfo.projectDesc
                }
                this.$http.post("projectInfo/changeProject",changeprojectform).then(resp=>{
                  if(resp.data.code==200){
                    this.$message({
                              message: resp.data.message,
                              type: 'success'
                            })


                  }else{
                    this.$message.error(resp.data.message)

                  }
                  this.dialogVisible2=false
                  this.getAllProjects(1,3)

                  })


          }


    },
    created() {
      this.getAllProjects(1,3)
    }

  }
</script>

<style>
</style>
